<template>
  <div class="box">
    <el-card style="margin: 20px">
      <!-- 查询表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="值班日期">
                <el-date-picker
                  v-model="searchForm.dutyDate"
                  style="width: 200px"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="起始值班日期">
                <el-date-picker
                  v-model="searchForm.startDutyDate"
                  style="width: 200px"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="结束值班日期">
                <el-date-picker
                  v-model="searchForm.endDutyDate"
                  style="width: 200px"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="领导姓名"
                ><el-input
                  v-model="searchForm.dutyLead"
                  style="width: 200px"
                  placeholder="领导姓名"
                ></el-input
              ></el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="警员姓名"
                ><el-input
                  v-model="searchForm.dutyPolice"
                  style="width: 200px"
                  placeholder="警员姓名"
                ></el-input
              ></el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple" style="display: flex">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="primary" @click="addList">新增</el-button>
              <el-button type="primary" @click="uploadXLs">下载模板</el-button>
              <el-upload
                style="margin-left: 10px"
                class="upload-demo inline-block"
                action="/drug/duty/upload"
                multiple
                :on-success="successD"
                :file-list="fileList"
                :show-file-list="false"
              >
                <el-button type="primary">导入数据</el-button>
              </el-upload>
            </div></el-col
          >
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin: 20px">
      <!-- 表格
        @selection-change="handleSelectionChange"
       -->
      <el-table
        style="width: 100%"
        stripe
        :data="list"
        border
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column
          :prop="item.prop"
          v-for="(item, index) in tableList"
          :key="index"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button icon="el-icon-edit" type="text" @click="editList(row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确认删除这条值班信息吗？"
              @confirm="deleteBeOnDuty(row)"
            >
              <el-button type="text" slot="reference" icon="el-icon-delete"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 20px; text-align: center"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[8, 10, 15]"
        @current-change="getList"
        @size-change="handleSizeChange"
        layout="prev, pager, next,jumper,->,total,sizes "
        :total="total"
      >
      </el-pagination>
      <!-- 添加与编辑弹窗 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="formList"
          label-width="150px"
        >
          <el-form-item label="值班日期" prop="dutyDate">
            <el-date-picker
              v-model="formList.dutyDate"
              style="width: 300px"
              size="medium "
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="值班领导" prop="dutyLead"
            ><el-input
              v-model="formList.dutyLead"
              style="width: 300px"
              size="medium "
              placeholder="领导姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="值班民警" prop="dutyPolice"
            ><el-input
              v-model="formList.dutyPolice"
              style="width: 300px"
              size="medium "
              placeholder="民警姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="处警" prop="locatePolice"
            ><el-input
              v-model="formList.locatePolice"
              style="width: 300px"
              size="medium "
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="值班民警座机" prop="specialPlane"
            ><el-input
              v-model="formList.specialPlane"
              style="width: 300px"
              size="medium "
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [],
      // 表格头数据
      tableList: [
        { prop: "dutyDate", label: "值班日期", width: "" },
        { prop: "dutyLead", label: "值班领导", width: "" },
        { prop: "locatePolice", label: "处警", width: "" },
        { prop: "dutyPolice", label: "值班民警", width: "" },
        { prop: "specialPlane", label: "值班民警电话", width: "" },
      ],
      fileList: [],
      // 页数
      page: 1,
      // 展示数据条数
      limit: 8,
      // 数据条数
      total: 20,
      // 控制弹窗字段
      dialogVisible: false,
      baseloading: false,
      // 弹窗名
      title: "",
      searchForm: {
        // 值班日期
        dutyDate: "",
        // 值班领导
        dutyLead: "",
        // 值班民警
        dutyPolice: "",
        // 结束值班日期
        endDutyDate: "",
        // 起始值班日期
        startDutyDate: "",
      },
      // 表单数据
      formList: {
        // 值班日期
        dutyDate: "",
        // 领导姓名
        dutyLead: "",
        // 民警姓名
        dutyPolice: "",
        // 处警
        locatePolice: "",
        // 值班民警座机
        specialPlane: "",
      },
      // 表单校验
      rules: {
        dutyDate: [
          { required: true, message: "请选择值班日期", trigger: "blur" },
        ],
        dutyLead: [
          { required: true, message: "请输入领导姓名", trigger: "blur" },
        ],
        dutyPolice: [
          { required: true, message: "请输入民警姓名", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    async getList(pager = 1) {
      this.page = pager;
      const { page, limit, searchForm } = this;
      let data = {
        pageNum: page,
        pageSize: limit,
        dutyDate: searchForm.dutyDate,
        dutyLead: searchForm.dutyLead,
        dutyPolice: searchForm.dutyPolice,
        endDutyDate: searchForm.endDutyDate,
        startDutyDate: searchForm.startDutyDate,
      };
      let result = await this.$API.beOnDuty.reqGetList(data);
      if (result.status == 200) {
        this.list = result.data.records;
        this.total = result.data.total;
      }
    },
    // 查询按钮
    search() {
      this.getList();
    },
    // 每页显示条数发生变化时
    handleSizeChange(limit) {
      this.limit = limit;
      this.getList();
    },
    // 新增按钮
    addList() {
      this.title = "新增值班";
      this.dialogVisible = true;
      this.formList = {
        // 值班日期
        dutyDate: "",
        // 领导姓名
        dutyLead: "",
        // 民警姓名
        dutyPolice: "",
        // 处警
        locatePolice: "",
        // 值班民警座机
        specialPlane: "",
      };
    },
    // 编辑按钮
    editList(row) {
      console.log(row);
      this.formList = { ...row };
      this.title = "编辑值班";
      this.dialogVisible = true;
    },
    // 弹框确认按钮
    confirm() {
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          console.log(this.formList);
          let result = await this.$API.beOnDuty.reqAddOrEdit(this.formList);
          if (result.status == 200) {
            this.$message({
              message: this.formList.id ? "修改成功" : "新增成功",
              type: "success",
            });
            this.getList(this.formList.id ? this.page : 1);
            this.dialogVisible = false;
          }
        } else {
          return false;
        }
      });
    },
    // 关闭弹窗的回调
    handleClose(done) {
      this.$confirm("您还未确认保存，确认退出吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除按钮
    async deleteBeOnDuty(row) {
      let result = await this.$API.beOnDuty.reqDelete(row.id);
      if (result.status == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 当当前页删完，自动跳到上一页
        this.getList(this.list.length > 1 ? this.page : this.page - 1);
      }
    },
    // 导出按钮
    uploadXLs() {
      this.$API.beOnDuty.reqGetExport(this.formList);
    },
    successD() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  overflow-y: auto;
}
</style>
